@import "var.less";


#index{
	padding: 48px 0 0 200px;min-height:100%;width: 100%;position: relative;
	.header{
		width: 100%;height: 48px;line-height:48px;padding-left: 200px;background:  linear-gradient(to right,#00b7e0,lighten(#00b7e0, 30%));
		position: fixed;left:0;top:0;z-index: 998;
		box-shadow: @shadow-base;

		.logo{
			width: 200px;height:48px;color:#fff;text-align: center;padding: 0 10px;white-space:nowrap;
			position: absolute;z-index: 999;left: 0;overflow: hidden;

			.logo-text{
				line-height: 48px;border-radius: 4px;text-align: left;
				img{width: 30px;margin-right: 8px;vertical-align: middle;}
			}
		}

		.tools{
			height: 100%;padding-right: 20px;

			.qrcode{
				float: right;margin-right: 20px;
				>a{display: block;font-size: 30px;}
			}

			.tirgger{
				float: left;width: 50px;height:40px;line-height: 48px;text-align: center;font-size: 32px;transition:color @transition-time;
				&:hover{color:@primary-color;cursor: pointer;}
			}

			.ivu-poptip{
				float: right;position: relative;cursor: pointer;
				.username{
					transition:opacity @transition-time;opacity:.6;font-size: 13px;
					.ivu-icon-person{font-size: 18px;vertical-align: middle;}
					span{margin: 0 10px;vertical-align: middle;}
				}

				.btn-poptip{
					ul{
						&:not(:last-child){border-bottom: 1px solid @border-color-base;}
						li{line-height: 40px;transition:color @transition-time;}
						li:hover{color:@primary-color;}
						.ivu-icon{margin-right: 5px;font-size: 16px;display: inline-block;width: 20px;}
					}
				}

				&:hover {
					.username{opacity:.8;}
				}
			}
		}
	}
	.wrap{
		min-height: 100%;

		.content{
			padding:0px;
		}

		.left-menu{
			width:200px;background: @menu-dark-title;
			position: fixed;left:0;top:48px;bottom: 0;overflow: auto;z-index: 300;
			.search-menu{
				position: relative;padding: 0px 60px 0 10px;margin: 20px 0;height: 32px;z-index: 901;
				button{position: absolute;width:50px;right: 10px;top:0;font-size: 26px;height:32px;line-height: 32px;padding: 0;}
			}
			.menu{border-top:1px solid lighten(@menu-dark-title, 10%);padding-top: 10px;}
			.menu-title{
				i{font-size: 18px;}
				span,i{vertical-align: middle;}
			}
			.collapse-menu{display: none;}
			.ivu-menu-submenu{position: relative;}
			.menu-title{white-space:nowrap;display: inline-block;}
			.ivu-menu-item.menu-title{display: block;}
			.menu-title .ivu-icon{margin-right: 6px;}
			.menu-title span{opacity: 1;}
			.ivu-menu-item,.ivu-menu-submenu-title{margin: 1px 0;}
			& >ul>.ivu-menu-item,.ivu-menu-submenu-title{
				padding: 8px 18px;color:#fff;
			}
			.ivu-menu-submenu .ivu-menu-item{padding-top:6px;padding-bottom: 5px;}
			.ivu-menu-submenu.ivu-menu-item-active,.ivu-menu-submenu.ivu-menu-opened{
				.ivu-menu-submenu-title{
					background: @primary-color;
				}
				.ivu-menu-item-selected{
					background: darken(@primary-color, 10%)!important;
				}
			}
			.ivu-menu-dark.ivu-menu-vertical .ivu-menu-item-active:not(.ivu-menu-submenu){
				background: @primary-color;
				border:0;
			}
		}
	}

	&.collapse{
		padding-left:50px;
		.header{
			padding-left: 50px;
		}

		.wrap{
			.left-menu.nohover-menu{
				width: 50px;overflow: visible;
				.search-menu{
					.ivu-select{display: none;}
					button{
						left:5px;right: 5px;
						width: 40px;background:lighten(@menu-dark-title, 10%);
						border-color:@menu-dark-title;color:@primary-color}
				}
				.menu-list{
					display: none;
				}
				.menu{
					.menu-title{text-align: center;}
					.menu-title span{
						position: absolute;top: 0;left:-150px;
						width: 168px;line-height: 37px;background: #02c2d7;
						opacity: 0;transition:all @transition-time;
					}
					&>.ivu-menu-item,.ivu-menu-submenu-title{}
					.ivu-menu-submenu-title>.ivu-icon{display: none;}
					.collapse-menu{
						width:167px;background:@menu-dark-title;
						position: absolute;left:51px;top:37px;
						max-height: calc(~"39px * 5");overflow-y: auto;
						.ivu-menu-item{
							padding: 8px 18px;text-align: center;
							&:hover{color:@primary-color;}
							&.ivu-menu-item-active{
								color:#fff;
							}
						}
					}
					.ivu-menu-submenu.ivu-menu-opened{
						.ivu-menu-submenu-title{
							background: @menu-dark-title;
						}
					}
					.ivu-menu-submenu.ivu-menu-item-active{
						.ivu-menu-submenu-title{
							background: @primary-color;
						}
					}
				}
			}
		}
	}

	.list {

		.breadcrumb {
			position: relative;

			.ivu-btn-group {
				position: absolute;top: 0;right: 0;
				height: 100%;

			}

			.btns{
				i{vertical-align: middle;}
				i{margin-right: 5px;}
				button{background: darken(@border-color-base, 4%);}
				button:hover{
					background: darken(@border-color-base, 8%);color:@text-color;
				}
			}
		}

	}

}
